<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//封装一下lazyLoading函数
			let pic1 = ["./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg",
				"./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg", "./pic1.jpg"
			]
			let els = document.querySelectorAll('ul>li>img')
			let pic2 = "./pic2.jpg"
			// 两个参数，参数一是图片节点构成的伪数组，参数二是图片地址构成的数组
			function lazyLoading(pics, realUrlArray, picForLoading) {
				if (!(pics.length == realUrlArray.length)) {
					console.log('节点和图片数量不相等')
					return
				}
				// 获取视口宽度
				let innerHeight = window.innerHeight
				// 图片替换函数
				function fn() {
					for (let i = 0; i < pics.length; i++) {
						//首先我们要鼠标向下滚动才判断
						if (pics[i].getBoundingClientRect().top <= innerHeight && pics[i].getAttribute('src') == picForLoading) {
							// 这个el.getBoundingClientRect().top就是元素离视口顶端的距离
							pics[i].src = realUrlArray[i]
						}
					}
				}
				//在页面展开时加载函数
				window.onload = function() {
					fn()
				}
				//获取scroll之前被卷起的页面高度
				let beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop
				// 设置flag的值用于节流
				let flag = true
				// 在发生scroll事件时加载事件
				window.addEventListener('scroll', function() {
					//还是节流的部分
					if (!flag) return
					flag = false
					setTimeout(function() {
						//获取scroll事件发生后被卷起的页面高度
						let afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop
						// 得到高度差
						let delta = afterScrollTop - beforeScrollTop
						// 确认页面是scroll向下之时，触发fn
						if (delta > 0) {
							fn()
						}
						flag = true
					}, 1000)

				}, {
					// 不阻止默认行为，不过scroll好像没有默认行为
					passive: true
				})
			}
			lazyLoading(els, pic1, pic2)
		</script>
		<style>
			li {
				list-style: none;
			}

			ul li img {
				display: inline-block;
				height: 300px;
				width: 500px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
		    <li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
			<li><img src="../123/img/1.jpg"></li>
		</ul>

	</body>
</html>
